<template>
    <div>
        <n-modal :show-icon="false" v-model:show="showModal" preset="dialog" title="创建" style="width:50%"
            :on-after-leave="cancelCallback">
            <div class="cotent">
                <n-steps :current="(current)" :status="currentStatus" size="small">
                    <n-step title="" description="待审批" />
                    <n-step title="" description="审批中" />
                    <n-step title="" description="审批完成/拒绝" />
                    <!-- <n-step title="" description="lover" /> -->
                </n-steps>
                <div class="myLeave">
                    <n-form ref="formRef" label-placement="left">
                        <n-form-item label="休假类型:" >
                            <span>{{shoWData.applyState==1 ?'待审批':shoWData.applyState==2?"审批中":shoWData.applyState==3?"拒审批拒绝":shoWData.applyState==4?'审批通过':shoWData.applyState==5?'废弃':'其他' }}</span>
                        </n-form-item>
                        <n-form-item label="休假时间:">
                            <span>{{shoWData.DateProcess}}</span>
                        </n-form-item>
                        <n-form-item label="休假时长:">
                            <span>{{shoWData.leaveTime}} 天</span>
                        </n-form-item>
                        <n-form-item label="休假原因:">
                            <span>{{shoWData.reasons}}</span>
                        </n-form-item>
                        <n-form-item label="审批状态:">
                            <span>{{shoWData.applyType ==1?'事假':shoWData.applyType ==2?'调休' :shoWData.applyType ==3?'年假':'其他' }}</span>
                        </n-form-item>
                        <n-form-item label="审批人:">
                            <span>{{shoWData.auditUsers}}</span>
                        </n-form-item>
                    </n-form>
                </div>
            </div>

            <template #action>
                <n-space>
                    <n-button @click="cancelCallback">取消</n-button>
                    <n-button type="info" :loading="formBtnLoading" @click="cancelCallback">确定</n-button>
                </n-space>
            </template>
        </n-modal>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs, onMounted, onBeforeMount } from 'vue'
import { StepsProps } from 'naive-ui'
export default {
    setup() {
        const showModal = ref(false)
        const state = reactive({
            current: 1,
            currentStatus: null,
            shoWData:{}
        })
        const methods = reactive({
            // 取消
            cancelCallback() {
                showModal.value = false
            },
            showModalfun(item) {
                 showModal.value = true
                 state.shoWData=item
                if (item.applyState = 1) {
                    state.current = 1
                } else if (item.applyState == 2) {
                    state.current = 2
                } else if (item.applyState == 4) {
                    state.current = 3
                    state.currentStatus = 'finish'
                } else if (state.current == 3 || state.current == 5) {
                    state.current = 2
                    state.currentStatus = 'error'
                }
               
            }

        })

        return {
            ...toRefs(methods),
            showModal,
            ...toRefs(state)
        }
    }
}

</script>

<style lang="scss">
.myLeave{
    padding: 20px 0;
}
.myLeave .n-form-item-feedback-wrapper{
    min-height: 10px !important;
 }
</style>